<template>
  <div class="css-slider-viewport">
    <div class="css-slider-holder">
      <div class="grid grid--slider grid4 slider" ref="slider"  :style="sliderStyle">
        <aplusmax-goods-card v-for="(goods, index) in itemsComputed" :key="index" :class="{grid_slider_active: (index-1)%4===0 && (index+1)%1===0}" :goodsInfo="goods"></aplusmax-goods-card>
      </div>
    </div>
  </div>
  <aplusmax-select :count="items.length" :active="active" :prev="slide_left" :next="slide_right" :slide_position="slide_position"></aplusmax-select>
</template>

<script setup lang='ts'>
import {defineProps, defineEmits, defineExpose, computed, ref} from 'vue'
import {goodsRandom} from "@/api/goods.ts";

defineProps({})
const slider = ref(null)

// onMounted(() => {
//   if (slider.value) {
//     const targetItem = slider.value.children[5 - 1]
//     console.log(targetItem)
//
//     if (targetItem) {
//       const offset = targetItem.offsetLeft; // 计算目标元素的偏移量
//       console.log(offset)
//       // container.style.transform = `translateX(-${offset}px)`; // 应用滑动效果
//     }
//   }
// });

let items = ref([])
// 加载商品
const getRandomGoods = () => {
  const payload = {
    is_new: 1,
    split:2
  }
  goodsRandom(payload).then((res) => {
    items.value = res.data
    console.log(items.value, "+++++++++++")
  }).catch((err) => {
    console.log(err)
  });
}
getRandomGoods()

const itemsComputed = computed(() => {
  console.log(items.value.flat())
  return items.value.flat()
})

const translateX = ref(0)
const active = ref(1)

const slide_left = () => {
  if (active.value !== 1){
    translateX.value += 100; // 调整为滑动的距离
    active.value -= 1
  }
}

const slide_right = () => {
  if (active.value < items.value.length){
    translateX.value -= 100; // 调整为滑动的距离
    active.value += 1
  }
}

const slide_position = (position: Number) => {
  if (Array.from({ length: items.value.length }, (_, index) => index+1).includes(position)){
    active.value = position
    translateX.value = -(100*(active.value-1))
  }
}



const sliderStyle = computed(() => {
  return {
    transform: `translateX(${translateX.value}%)`,
  };
})

const emit = defineEmits([])

defineExpose({})
</script>

<style scoped lang='less'>

.slider {
  display: flex;
  transition: transform 0.5s ease;
}
.css-slider-viewport{
  width: 100%;
  .css-slider-holder{
    overflow: hidden;
    //overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    cursor: grab;
    .grid--slider{
      grid-auto-flow: column;
      grid-template-columns: calc( 100%  / 2 );
      grid-auto-columns: calc( 100%  / 2 );
      position: relative;
    }
    .grid-4{
      --visible-cols: 4;
    }
    .grid{
      //--col-gap: 26px;
      --col-size: calc( (100% - var(--col-gap) * (var(--visible-cols) - 1)) / var(--visible-cols) );
      display: grid;
      grid-gap: var(--col-gap);
    }
  }
}

.product{
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.css-slide--snap{
  scroll-snap-align: start;
}
.card{
  --border-width-cards: 1px;
  --border-radius-cards: 10px;
  --border-width-buttons: 1px;
  --border-radius-buttons: 30px;
  --border-width-forms: 1px;
  --border-radius-forms: 5px;
  --shadow-x-cards: 0px;
  --shadow-y-cards: 0px;
  --shadow-blur-cards: 0px;
  border: solid var(--border-width-cards) #e1e1e1;
  border-radius: var(--border-radius-cards);
  overflow: hidden;
  background-color: #ffffff;
  position: relative;
  color: #1d1d1d;
  box-shadow: var(--shadow-x-cards) var(--shadow-y-cards) var(--shadow-blur-cards) rgba(0,0,0,0);
  margin-bottom: calc(var(--shadow-y-cards) + var(--shadow-blur-cards));
  margin-inline-end: calc(var(--shadow-x-cards) + var(--shadow-blur-cards));
}
</style>